<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>   
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--
/*
*
* Copyright (c) 2011 Vaulting Systems International
* 
* Permission is hereby granted, free of charge, to any person obtaining a copy 
* of this software and associated documentation files (the "Software"), to deal 
* in the Software without restriction, including without limitation the rights 
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
* of the Software, and to permit persons to whom the Software is furnished to do  
* so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all  
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE  
* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
*/
-->
<fmt:setBundle basename="global"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><fmt:message key="dashboard.title"/></title>
<link rel="stylesheet" type="text/css" media="screen" href="/SecureCredit/css/smoothness/jquery-ui-1.8.15.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/SecureCredit/css/ui.jqgrid.css" />
<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}

a.normalLink:link { color: #0000FF; font-size:14px; font-style:normal;
	font-weight:bold; text-decoration: underline }
a.normalLink:visited { color: #0000FF; font-size:14px; font-style:normal;
	font-weight:bold; text-decoration: underline }
a.normalLink:hover { color: #FF0000; font-size:14px; font-style:normal;
	font-weight:bold; text-decoration: underline }
	
</style>
 
<script src="/SecureCredit/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="/SecureCredit/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/SecureCredit/js/jquery.jqGrid.min.js" type="text/javascript"></script>
 
    <script type="text/javascript">
    $(function(){ 
    	  $("#list").jqGrid({
    	    url:'/SecureCredit/searchCreditCards.sc',
    	    editurl:'/SecureCredit/editCreditCards.sc',
    	    datatype: 'json',
    	    mtype: 'POST',
    	    colNames:['ID','Card Number', 'Name On Card','Card Type','Four Digits','Expiration Date'],
    	    colModel :[ 
    	      {name:'id', index:'id', hidden:true, key:true}, 
    	      {name:'creditCardNumber', index:'creditCardNumber', width:150, 
        	      editable:true, edittype:'text',
        	      editoptions:{maxlength:16}, editrules:{required:true},
        	      sortable:true}, 
    	      {name:'nameOnCard', index:'nameOnCard', width:200, 
            	      editable:true, edittype:'text', editrules:{required:true}, 
            	      sortable:true}, 
    	      {name:'cardType', index:'cardType', width:80, 
                	      editable:true, edittype:'text', editrules:{required:true},
                	      sortable:false}, 
    	      {name:'fourDigits', index:'fourDigits', width:80, 
                    	      editable:true, edittype:'text', 
                    	      editoptions:{maxlength:4},editrules:{required:true},
                    	      sortable:true}, 
    	      {name:'expirationDate', index:'expirationDate', width:150, 
                        	      editable:true, edittype:'text', editrules:{required:true},
                        	      sortable:true} 
    	    ],
    	    jsonReader : {
    	        root:"rows",
    	        page: "page",
    	        total: "total",
    	        records: "records",
    	        repeatitems: false,
    	        id: "0"
    	     },
    	    del: {reloadAfterSubmit:true},
    	    add: {reloadAfterSubmit:true,
        	    beforeShowForm:
            	    function(frm) {
        	        	$('#creditCardNumber').removeAttr('readonly');
    	    		}  
        	    },
    	    edit: {reloadAfterSubmit:true,
        	    beforeShowForm:
            	    function(frm) {
        	        	$('#creditCardNumber').attr('readonly','readonly');
    	    		},
            	    afterShowForm:
                	    function(frm) {
            	        	$('#nameOnCard')[0].focus();
        	    		}    
        	    },
    	    pager: '#pager',
    	    rowNum:15,
    	    rowList:[10,15,20],
    	    sortname: 'id',
    	    sortorder: 'asc',
    	    viewrecords: true,
    	    gridview: true,
    	    caption: 'Credit Cards',
    	    multiselect: true,
    	    onSelectRow: function(ids) {
        			if(ids == null) {
        				ids=0;
        				if($("#list2").jqGrid('getGridParam','records') >0 )
        				{
        					$("#list2").jqGrid('setGridParam',{url:"/SecureCredit/searchCardTransactions.sc?id="+ids,page:1});

        					var gridRow = $("#list").jqGrid('getRowData',ids);
            				$("#list2").jqGrid('setCaption',"Card Transactions for: " + gridRow.creditCardNumber).trigger('reloadGrid');					
        				}
        			} else {
        				$("#list2").jqGrid('setGridParam',{url:"/SecureCredit/searchCardTransactions.sc?id="+ids,page:1});

        				var gridRow = $("#list").jqGrid('getRowData',ids);
        				$("#list2").jqGrid('setCaption',"Card Transactions for: " + gridRow.creditCardNumber).trigger('reloadGrid');			
        			}
        		}
    	    
    	  }); 

    	  $("#list").jqGrid('navGrid',"#pager",{edit:true,add:true,del:true});


    	  $("#list2").jqGrid({
      	    url:'/SecureCredit/searchCardTransactions.sc?id=0',
      	    editurl:'/SecureCredit/editCardTransactions.sc',
      	    datatype: 'json',
      	    mtype: 'POST',
      	    colNames:['ID','Transaction Number', 'Vendor Code','Transaction Date','Post Date','Amount', 'CreditCardId'],
      	    colModel :[ 
      	      {name:'id', index:'id', hidden:true, key:true}, 
      	      {name:'transactionNumber', index:'transactionNumber', width:200, 
          	      editable:true, edittype:'text',
          	      editoptions:{maxlength:16}, editrules:{required:true},
          	      sortable:true}, 
      	      {name:'vendorCode', index:'vendorCode', width:200, 
              	      editable:true, edittype:'text', editrules:{required:true}, 
              	      sortable:true}, 
      	      {name:'transactionDate', index:'transactionDate', width:100, 
                  	      editable:true, edittype:'text', editrules:{required:true},
                  	      sortable:false}, 
      	      {name:'postDate', index:'postDate', width:100, 
                      	      editable:true, edittype:'text', 
                      	      editoptions:{maxlength:4},editrules:{required:true},
                      	      sortable:true}, 
      	      {name:'amount', index:'amount', width:80, 
                          	      editable:true, edittype:'text', editrules:{required:true},
                          	      sortable:true},
              {name:'creditCardId', index:'creditCardId', hidden:true}                          	       
      	    ],
      	    jsonReader : {
      	        root:"rows",
      	        page: "page",
      	        total: "total",
      	        records: "records",
      	        repeatitems: false,
      	        id: "0"
      	     },
      	    del: {reloadAfterSubmit:true},
      	    add: {reloadAfterSubmit:true,
          	    beforeShowForm:
              	    function(frm) {
          	        	$('#transactionNumber').removeAttr('readonly');
      	    		}  
          	    },
      	    edit: {reloadAfterSubmit:true,
          	    beforeShowForm:
              	    function(frm) {
          	        	$('#transactionNumber').attr('readonly','readonly');
      	    		},
              	    afterShowForm:
                  	    function(frm) {
              	        	$('#vendorCode')[0].focus();
          	    		}    
          	    },
      	    pager: '#pager2',
      	    rowNum:15,
      	    rowList:[10,15,20],
      	    sortname: 'id',
      	    sortorder: 'asc',
      	    viewrecords: true,
      	    gridview: true,
      	    caption: 'Card Transactions',
      	    multiselect: true
      	  }); 

      	  $("#list2").jqGrid('navGrid',"#pager2",{edit:true,add:true,del:true});
    	}); 
    </script>

</head>
<body bgColor="#ffffff" leftMargin="0" topMargin="0" rightMargin="0">

        <div id="headline">
	        <h1 class="ui-state-default" style="background: none; border: none;"><fmt:message key="headline.title" /></h1>
	        <h4 class="ui-state-default" style="background: none; border: none;"><fmt:message key="headline.version" /></h4>
        </div>
               
        <div > 
			<table id="list"><tr><td/></tr></table> 
			<div id="pager"></div> 
 		</div>
		<br /><br /><br />
		<div > 
			<table id="list2"><tr><td/></tr></table> 
			<div id="pager2"></div> 
 		</div>

      <div align="center" class="ui-state-default">
        <fmt:message key="footer.copy" /><br/>
      </div>

</body>

</html>